<script setup>
import { ElMessage } from 'element-plus';
import { reactive, ref } from "@vue/reactivity";
import { post } from '../utils'


let editForm = ref(null);
let editData = reactive({
    dialogVisible: false,
    formLabelWidth: 60,
    model: {
        id: 0,
        name: '',
        sys: '',
        url: '',
        resType: 0,
        orderNum: 0,
        icon: '',
        parentId: 0,
    },
    rules: {
        "name": [
            { required: true, message: '请输入名称', trigger: 'blur' },
        ]
    }
});
function showEdit(id, sys, resType,parentId) {
    if (id == 0) {
        editData.model = {
            id: 0,
            name: '',
            sys: sys,
            url: '',
            resType: resType,
            orderNum: 999,
            icon: '',
            parentId: parentId,
        };
        editData.dialogVisible = true;
    } else {
        post('/api/SysSetting/GetSysRes', { id }).then(res => {
            editData.model = res.result;
            editData.dialogVisible = true;
        });
    }
}

function submitEdit() {
    editForm.value.validate((valid) => {
        // console.log(editData.model);
        if (valid) {
            post('/api/SysSetting/EditSysRes', editData.model).then((res) => {
                // console.log("编辑结果", res);
                ElMessage.success(res.msg);
                if (res.success) {
                    editData.dialogVisible = false
                    emit("edit");
                }
            })
        }
    })
}
const emit = defineEmits(['edit']);

defineExpose({
    showEdit,
});

</script>

<template>
    <el-dialog title="编辑资源信息" v-model="editData.dialogVisible" width="550px">
        <el-form ref="editForm" :model="editData.model" :rules="editData.rules">
            <el-form-item label="名称" prop="name" :label-width="editData.formLabelWidth">
                <el-input v-model="editData.model.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
                v-if="editData.model.resType == 1"
                label="地址"
                prop="url"
                :label-width="editData.formLabelWidth"
            >
                <el-input v-model="editData.model.url" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="排序号" prop="orderNum" :label-width="editData.formLabelWidth">
                <el-input v-model.number="editData.model.orderNum" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item
                v-if="editData.model.resType == 1"
                label="图标"
                prop="icon"
                :label-width="editData.formLabelWidth"
            >
                <el-input v-model="editData.model.icon" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="editData.dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitEdit">确 定</el-button>
            </span>
        </template>
    </el-dialog>
</template>
